<template>
  <div>
    <v-noticebar></v-noticebar>
    <v-header title="策略超市"
      :back="false"
      rightIcon="icon-tubiaozhizuomoban"
      v-on:clickRightIcon="$router.push('/searchCom')"></v-header>
      <div style="padding-top: 50px;">
        <div class="country-box" style="position: fixed;top: 61px;width: 100%;z-index: 999999;background: white;">
          <div class="bottom-line"
            :style="{ transform: 'translate3D(' + lineidx * scrollBtnWidth + 'px, 0px, 0)' }"
          ></div>
          <div class="country-list">
            <a @click="goBack()" class="scrollBtn"
              >全部</a>
            <a class="scrollBtn"
                ref="scrollBtn"
                v-for="(item, idx) in country"
                :class="{ btnActive : item.active }"
                :key="idx"
                @click="findData(idx, item.c)"
                >{{item.n}}</a>
          </div>
        </div>
        <v-qstragerylist
          style="margin-top: 40px"
          v-on:choice="selectedSQstrage"
          :item="s"
          title="重点推荐"></v-qstragerylist>
          <div style="height: 0.5rem; background: #EDF1F5"></div>
        <v-qstragerylist
          v-on:choice="selectedDQstrage"
          :item="d"
          title="风格精选"></v-qstragerylist>
        <div>
          <div style="height: 0.5rem; background: #EDF1F5"></div>
          <div class="mapheader"></div>
          <v-qstragerymap
            :point="countryPoint"
            :active="isCountryMapActive"
            v-on:seeDetail="seeDetail"
            :coordinate="coordinate"
            :country="selectedCountry"
            v-on:gotoDetail="gotoDetail"
            >
          </v-qstragerymap>
        </div>
      </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import myHeader from '../components/header.vue'
import country from '../assets/mooc.js'

let oWidth = document.body.offsetWidth

export default {
  components: {
    myHeader
  },
  data () {
    return {
      lineidx: 0,
      s: [],
      d: [],
      globalRem: 1,
      coordinate: {
        x: 0,
        y: 0
      },
      currentIdx: false,
      country: [],
      selectedCountry: {},
      isCountryMapActive: false,
      countryPoint: [
        {
          country: 'china',
          point: {
            x: oWidth * 0.75,
            y: 45
          }
        },
        {
          country: 'usa',
          point: {
            x: oWidth * 0.16,
            y: 55
          }
        },
        {
          country: 'uk',
          point: {
            x: oWidth * 0.83,
            y: 55
          }
        },
        {
          country: 'hongkong',
          point: {
            x: oWidth * 0.76,
            y: 75
          }
        },
        {
          country: 'germany',
          point: {
            x: oWidth * 0.50,
            y: 40
          }
        },
        {
          country: 'singapore',
          point: {
            x: oWidth * 0.75,
            y: 97
          }
        },
        {
          country: 'japan',
          point: {
            x: oWidth * 0.46,
            y: 35
          }
        },
        {
          country: 'france',
          point: {
            x: oWidth * 0.45,
            y: 45
          }
        }
      ],
      scrollBtnWidth: 0
    }
  },
  methods: {
    findData (idx, id) {
      if (this.currentIdx === idx) return
      this.lineidx = idx + 1
      this.currentIdx = idx
      this.getQstrageryByCountry(id, idx)
      this.$set(this.$store.state, 'qstrageryDetail', true)
      this.$set(this.$store.state, 'qstrageryByCountry', idx)
      this.coordinate = this.countryPoint[idx].point
      this.isCountryMapActive = true
      this.country.forEach((item, idx) => {
        this.$set(item, 'active', false)
      })
      this.country[idx].active = true
    },
    gotoDetail () {
      let qs = this.$store.state.selectedDQstrage
      this.$router.push(
        {
          path:'/subscribe/',
          query:
            {
              id: qs._id + '&' + qs.country + qs.feature
            }
          }
        )
    },
    getQstrageryByCountry (id, idx) {
      window.localStorage.getItem(`strategyByCountry_${id}`) ? this.getQstrageryByCountryByCache(id, idx) : this.getQstrageryByCountryByNetwork(id, idx)
    },
    getQstrageryByCountryByCache (id, idx) {
      this.$plugins.cacheControl.getCache(`strategyByCountry_${id}`, this.$config.cacheTime.offlineCache).then((res) => {
        this.s = res.data.important
        this.d = res.data.style
        this.s.forEach((item) => {
          this.$set(item, 'active', false)
        })
        this.$set(this.$store.state, 'selectedDQstrage', this.s[0])
        this.d.forEach((item) => {
          this.$set(item, 'active', false)
        })
        setTimeout(() => {
          this.s[0].active = true
        }, 300)
        this.$set(this, 'selectedCountry', res.data)
        this.selectedSQstrage(0)
        document.getElementsByClassName('countNum')[0].innerHTML = res.data.count
      }).catch(() => {
        this.getQstrageryByCountryByNetwork(id, idx)
      })
    },
    getQstrageryByCountryByNetwork (id, idx) {
      this.baseService.get(`strategy/countryCategory?c=${id}`).then((res) => {
        this.$plugins.cacheControl.setCache(`strategyByCountry_${id}`, res.data)
        this.s = res.data.important
        this.d = res.data.style
        this.s.forEach((item) => {
          this.$set(item, 'active', false)
        })
        this.$set(this.$store.state, 'selectedDQstrage', this.s[0])
        this.d.forEach((item) => {
          this.$set(item, 'active', false)
        })
        setTimeout(() => {
          this.s[0].active = true
        }, 300)
        this.$set(this, 'selectedCountry', res.data)
        this.selectedSQstrage(0)
        document.getElementsByClassName('countNum')[0].innerHTML = res.data.count
      })
    },
    findCountry () {
      window.localStorage.getItem('countrylist') ? this.findCountryByCache() : this.findCountryByNetwork()
    },
    findCountryByNetwork () {
      this.baseService.get('strategy/country').then((res) => {
        this.$plugins.cacheControl.setCache('countrylist', res.data)
        res.data.forEach((item, idx) => {
          item.active = false
        })
        this.country = res.data
        this.$nextTick(() => {
          this.scrollBtnWidth = this.$refs.scrollBtn[0].offsetWidth
        })
        this.country.forEach((item, idx) => {
          if (this.$route.params.id === item.c) {
            this.$set(this, 'coordinate', this.countryPoint[idx].point)
            this.seeDetail(item.c, idx)
            this.$set(this.$store.state, 'qstrageryByCountry', idx)
            if (idx === 0) {
              document.getElementsByClassName('point')[0].className = 'point pointActive'
            }
            this.$store.state.qstrageryDetail = true
          }
        })
      })
    },
    findCountryByCache () {
      this.$plugins.cacheControl.getCache('countrylist', 1).then((res) => {
        res.data.forEach((item, idx) => {
          item.active = false
        })
        this.country = res.data
        this.$nextTick(() => {
          this.scrollBtnWidth = this.$refs.scrollBtn[0].offsetWidth
        })
        this.country.forEach((item, idx) => {
          if (this.$route.params.id === item.c) {
            this.$set(this, 'coordinate', this.countryPoint[idx].point)
            this.seeDetail(item.c, idx)
            this.$set(this.$store.state, 'qstrageryByCountry', idx)
            if (idx === 0) {
              document.getElementsByClassName('point')[0].className = 'point pointActive'
            }
            this.$store.state.qstrageryDetail = true
          }
        })
      }).catch(() => {
        this.findCountryByNetwork()
      })
    },
    seeDetail (arg, idx) {
      this.isCountryMapActive = true
      this.findData(idx, arg)
      // TODO: 用store存储选择的策略下标
      // TODO: 禁止地图拉出界面
      // TODO: 策略菜单回弹
      // TODO  点过的国家移动后不能再点
      // console.log(this.$store.state.selectedDQstrage)
    },
    selectedSQstrage (arg) {
      this.s[arg].active ? this.gotoDetail() : ''
      this.loop(this.s)
      this.loop(this.d)
      this.s[arg].active = true
      this.$set(this.$store.state, 'selectedDQstrage', this.s[arg])
    },
    selectedDQstrage (arg) {
      this.d[arg].active ? this.gotoDetail() : ''
      this.loop(this.s)
      this.loop(this.d)
      this.d[arg].active = true
      this.$set(this.$store.state, 'selectedDQstrage', this.d[arg])
    },
    loop (arr) {
      arr.forEach((item) => {
        item.active = false
      })
    },
    goBack () {
      this.isCountryMapActive = false
      setTimeout(() => {
        this.$router.push('/all')
      }, 300)
    }
  },
  mounted () {

  },
  activated () {
    this.findCountry()
  }
}
</script>

<style lang="less" scoped>
.country-box {
  display: -webkit-box;
  width: 100%;
  position: relative;
  overflow: scroll;
  border-top: 2px solid #e9e9e9;
  flex-direction: row;
  .country-list {
    display: flex;
    padding: 0 0.2rem;
    a {
      display: flex;
      font-size: 1.2rem;
      justify-content: center;
      width: 4.2rem;
      align-items: center;
      padding: 0 0.5rem;
      color: rgba(102,102,102,0.5);
      margin: 0.5rem 0;
      position: relative;
      letter-spacing: 2px;
    }
    a:before {
      content: '';
      height: 12px;
      width: 1px;
      position: absolute;
      top: 5px;
      background: rgba(102, 102, 102, 0.3);
      right: 0;
    }
    a:before:nth-last-child {
      background: white;
    }
    a:last-child {
      border-right: 0px solid white;
    }
  }
}

.country-box::-webkit-scrollbar {
  height: 2px;
}

.bottom-line {
  position: absolute;
  background: #7590FF;
  height: 3px;
  width: 2.5rem;
  margin: 0 1.2rem;
  top: 26px;
  transition: transform 0.3s;
  border-radius: 5px;
}

  @media screen and (max-width: 320px) {

  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .country-box {
      a {
        // font-size: 1.4rem !important;
        width: 5.8rem !important;
      }
      .bottom-line {
        width: 2.9rem;
        margin: 0 2.1rem;
        top: 27px;
      }
    }
  }
  @media screen and (min-width: 376px){
    .country-box {
      a {
        // font-size: 1.6rem !important;
        width: 6.2rem !important;
      }
      .bottom-line {
        width: 3rem;
        margin: 0 2.24rem;
        top: 27px;
      }
    }
  }

.btnActive {
  color: #4b67fb !important;
}

.head{
  height:50px;
  display: flex;
  justify-content: center;
  align-items:center;
  border-bottom: 1px solid #E9E9E9;
  box-sizing: border-box;
}
.head-left{
  position: absolute;
  top: 15px;
  left:10px;
}
.head-middle{
  font-size: 16px;
}
.head-right{
  position: absolute;
  right:10px;
  top:15px;
}

</style>
